<template>
	<view class="appealRecord">
		<view class="container bgF" style="height: 100rpx; ">
			<view class="container  "><u-button class="flor mr10 mt10" type="primary" size="mini" :ripple="true" @click="openDialog">我要申诉</u-button></view>
		</view>
		<view class="container">
			<!-- 没有内容 -->
			<view class="w100" v-if="appealList.length == 0">
				<view class="w100 flex-xy"><image src="../../static/noMsg.png" mode="widthFix" style="width: 60%;" class="mt50"></image></view>
			</view>
			<view class="w100" v-else>
				<view class="w100" style="height:2px;background: #f3f3f3;"></view>
				<view class="container flex-xy bgF " v-for="(items, i) in appealList" v-bind:key="i">
					<view class="w95 flex-spc-x  pt10 pb10">
						<view class="w50 ">
							<text class="fs30">申诉人：{{ items.phone }}</text>
						</view>
						<view class="w50 tar">
							<view class="fs24 co666 fs30">{{ items.createTime }}</view>
						</view>
					</view>

					<view class="w95 flex-xy   pb20 fs30">
						<view class="w95 mb10" style="height: 1px;background: #f3f3f3;"></view>
						<view class="w95 tal">申诉内容：{{ items.content }}</view>
					</view>
					<view class="w100 pb10"><u-button class="flor mr10 mt10" type="error" size="mini" :ripple="true" @click="openDelete(i)">删除</u-button></view>
					<view class="w100" style="height:2px;background: #f3f3f3;"></view>
				</view>
				<view class="container  mt20 mb20" style="background: #f3f3f3;"><u-divider color="#CCC" bg-color="#f3f3f3">~到底了,宝贝~</u-divider></view>
			</view>
		</view>
		<u-modal v-model="show" width="70%" title="我要申诉" show-cancel-button @confirm="dialogConfirm" @cancel="dialogCancel">
			<view class="slot-content mt30 mb30 flex-xy">
				<view class="w90"><textarea class="uni-input w95 " v-model="content" focus placeholder="请输入申诉内容" @blur="inputBlur" auto-height /></view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			appealList: [], //申诉列表
			show: false, //模态框
			content: '', //申诉内容
			index: null, //当前点击立即购买时候的购买商品下标
			pageSize: 20, //每页数量
			pageNum: 1 //页码
		};
	},
	methods: {
		openDelete(i) {
			let that = this
			var index = i;
			var obj = this.appealList[index]
			uni.showModal({
				title: '删除',
				content: '请问要删除本条申诉记录吗？',
				success: function(res) {
					if (res.confirm) {
						// PUT/mobileUser/appeal   删除申诉
						// 传appealId
						var putObj = { url: '/mobileUser/appeal', data: { appealId:obj.appealId } };
						that.putRequest(putObj)
							.then(res => {
								// console.log('res删除申诉 ', res);
								if (res.data.code == 200) {
									uni.showToast({
										title: '删除成功！',
										mask: true,
										icon: 'success',
										duration: 500,
										success: () => {
											setTimeout(() => {
												that.pageNum = 1; //页码
												that.appealList = [];
												that.getAppealList(); //查询订单列表
											}, 500);
										}
									});
								}
							})
							.catch(err => {
								// console.log('err删除申诉 ', err);
							});
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		// 		POST/mobileUser/appeal新增申诉
		toAppeal() {
			if (!!this.content) {
				var postObj = { url: '/mobileUser/appeal', data: { userId: uni.getStorageSync('y-userId'), content: this.content } };
				this.postRequest(postObj)
					.then(res => {
						// console.log('res新增申诉 ', res);
						if (res.data.code == 200) {
							uni.showToast({
								title: '申诉成功！',
								mask: true,
								icon: 'success',
								duration: 500,
								success: () => {
									setTimeout(() => {
										this.pageNum = 1; //页码
										this.appealList = [];
										this.getAppealList(); //查询订单列表
									}, 500);
								}
							});
						}
					})
					.catch(err => {
						// console.log('err新增申诉 ', err);
					});
			} else {
				uni.showToast({
					title: '请输入申诉内容！',
					mask: true,
					icon: 'none',
					duration: 500
				});
			}
		},

		// GET/mobileUser/appeal/list   查询申诉列表
		getAppealList() {
			var postObj = { url: '/mobileUser/appeal/list', data: { userId: uni.getStorageSync('y-userId'), pageNum: this.pageNum, pageSize: this.pageSize } };
			this.getRequest(postObj)
				.then(res => {
					// console.log('res查询申诉列表 ', res);
					if (res.data.code == 200) {
						this.appealList = [...this.appealList, ...res.data.rows];
					}
				})
				.catch(err => {
					// console.log('err查询申诉列表 ', err);
				});
		},
		// 打开对话框
		openDialog() {
			this.show = true;
		},
		// 确认
		dialogConfirm(e) {
			this.toAppeal();
			this.show = false;
			this.content = '';
		},
		// 取消
		dialogCancel() {
			this.show = false;
			this.content = '';
		},
		// 输入框框事件
		inputBlur(e) {
			// console.log('inputBlur', e);
			this.content = e.detail.value;
		}
	},
	onShow() {
		this.pageNum = 1; //页码
		this.appealList = [];
		this.getAppealList(); //查询订单列表
	},
	// 触底事件
	onReachBottom() {
		this.pageNum += 1;
		this.getAppealList();
	}
};
</script>

<style lang="less"></style>
